<script setup>
import {useStore} from 'vuex'
import { computed, nextTick, ref, toRefs, watch } from 'vue';
import painting from '../../service/socket/commands';

const store = useStore()
// 当前用户是否有权绘制
const paintAuthority = computed(()=>{
  return store.state.paint.painter === store.state.user.id || store.state.paint.painter === ''
})

// 画板ctx
let ctx = null
//第一个点坐标
let startPoint = {x: undefined, y: undefined};
//画板控制开关
let painting = false;

//控制橡皮擦开启
let EraserEnabled = false;
/**
 * @function commitMove
 * @param {*} point 点
 * @description 自己
 */
function commitMove(point){
  if(paintAuthority.value){
    store.dispatch('paint',{...point,painter:store.state.user.id})
    painting({...point,painter:store.state.user.id})
  }
}

const paintToWatch = computed(()=>{
  return {...store.state.paint}
})
watch(paintToWatch,(val,oldVal)=>{
  // 如果没有绘制权限，则收到信息后绘制
  if(!paintAuthority.value){
    drawLine(oldVal.x, oldVal.y, val.x, val.y);
  }
})

function handleMounseDown(e) {
  let x = e.offsetX;
  let y = e.offsetY;
  painting = true;
  if (EraserEnabled) {
      ctx.clearRect(x - 15, y - 15, 30, 30)
  }
  startPoint = {x: x, y: y};
  commitMove(startPoint)
};
function handleMouseMove(e) {
  let x = e.offsetX;
  let y = e.offsetY;
  let newPoint = {x: x, y: y};
  if (painting) {
    if (EraserEnabled) {
        ctx.clearRect(x - 15, y - 15, 30, 30)
    } else {
        drawLine(startPoint.x, startPoint.y, newPoint.x, newPoint.y);
    }
    startPoint = newPoint;
    commitMove(startPoint)
  }
};
function drawLine(xStart, yStart, xEnd, yEnd) {
    //开始绘制路径
    ctx.beginPath();
    //线宽
    ctx.lineWidth = 2;
    //起始位置
    ctx.moveTo(xStart, yStart);
    //停止位置
    ctx.lineTo(xEnd, yEnd);
    //描绘线路
    ctx.stroke();
    //结束绘制
    ctx.closePath();
}
nextTick(()=>{
  let canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  
//    松开鼠标
//    鼠标松开事件（onmouseup)
    canvas.onmouseup = function () {
        painting = false;
    };


eraser.onclick = function () {
    EraserEnabled = true;
    eraser.classList.add('active');
    brush.classList.remove('active');
    canvas.classList.add('xiangpica');
};
brush.onclick = function () {
    EraserEnabled = false;
    brush.classList.add('active');
    eraser.classList.remove('active');
    canvas.classList.remove('xiangpica');
};

//清屏
clear.onclick = function() {
    ctx.fillStyle = '#C5C5C5';
    ctx.fillRect(0,0,canvas.width,canvas.height);
};

//保存
save.onclick = function() {
    let url = canvas.toDataURL('image/jpg');
    let a = document.createElement('a');
    document.body.appendChild(a);
    a.href = url;
    a.download = '草稿纸';
    a.target = '_blank';
    a.click()
};

//画笔颜色及鼠标样式
// black.onclick = function () {
//     ctx.strokeStyle = 'black';
//     canvas.classList.add('cursor1');
//     canvas.classList.remove('cursor2');
//     canvas.classList.remove('cursor3');
//     canvas.classList.remove('cursor4');
//     canvas.classList.remove('cursor5');
//     canvas.classList.remove('xiangpica');
//     EraserEnabled = false;
//     eraser.classList.remove('active');
// };
// red.onclick = function () {
//     ctx.strokeStyle = 'red';
//     canvas.classList.add('cursor2');
//     canvas.classList.remove('cursor1');
//     canvas.classList.remove('cursor3');
//     canvas.classList.remove('cursor4');
//     canvas.classList.remove('cursor5');
//     canvas.classList.remove('xiangpica');
//     EraserEnabled = false;
//     eraser.classList.remove('active');
// };
// orange.onclick = function () {
//     ctx.strokeStyle = 'orange';
//     canvas.classList.add('cursor3');
//     canvas.classList.remove('cursor2');
//     canvas.classList.remove('cursor1');
//     canvas.classList.remove('cursor4');
//     canvas.classList.remove('cursor5');
//     canvas.classList.remove('xiangpica');
//     EraserEnabled = false;
//     eraser.classList.remove('active');
// };
// green.onclick = function () {
//     ctx.strokeStyle = 'green';
//     canvas.classList.add('cursor4');
//     canvas.classList.remove('cursor2');
//     canvas.classList.remove('cursor3');
//     canvas.classList.remove('cursor1');
//     canvas.classList.remove('cursor5');
//     canvas.classList.remove('xiangpica');
//     EraserEnabled = false;
//     eraser.classList.remove('active');
// };
// blue.onclick = function () {
//     ctx.strokeStyle = 'blueviolet';
//     canvas.classList.add('cursor5');
//     canvas.classList.remove('cursor2');
//     canvas.classList.remove('cursor3');
//     canvas.classList.remove('cursor4');
//     canvas.classList.remove('cursor1');
//     canvas.classList.remove('xiangpica');
//     EraserEnabled = false;
//     eraser.classList.remove('active');
// };
})



</script>

<template>
<div>
  <canvas @mousedown="handleMounseDown" @mousemove="handleMouseMove" id="canvas" height="800" width="800"></canvas>
  <span id="eraser"></span>
  <span id="brush"></span>
  <span id="clear"></span>
  <span id="save"></span>
</div>
</template>

<style scoped>
#canvas{
  border: 1px solid indianred;
}
</style>
